<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>童泰</title>
  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
  <link rel="stylesheet" href="./commonCSS/reset.css">
  <link rel="stylesheet" href="./commonCSS/vant.css">
  <link rel="stylesheet" href="../css/tongtai2.css">
</head>

<body>
  <div id="tongtai2" v-cloak>
    <van-search v-model="value" show-action placeholder="请输入搜索关键词" @search="onSearch" @clear="onclear">
      <template #action>
        <div class="btnSty" @click="onSearch">搜索</div>  
      </template>
    </van-search>

    <van-list
      v-model="loading"
      @load="onLoad"
      :finished="finished"
      finished-text="没有更多了"
      :immediate-check="false"
    >
      <van-card v-for="(item, index) of dataList" :key="index+'dataList'">
        <template #desc>
          <div class="content">
            <div class="isFlexBet">
              <p>开发单号: {{item.Number}}</p>
              <!-- <p>{{item.JobState}}</p> -->
              <p v-show="item.JobState=='已完成'" style="color: #000;">已完成</p>
              <p v-show="item.JobState=='已分配'" style="color: #5390F5;">已分配</p>
              <p v-show="item.JobState=='待分配'" style="color: #e74c3c;">待分配</p>
            </div>
            <div>产品名字: {{item.ProductName}}</div>
            <div>设计款号：{{item.DesignNumber}}</div>
            <div class="isFlexBet">
              <p>企划编号：{{item.PlanId}}</p>
              <p>尺码：{{item.ClothingSize}}</p>
            </div>
            <div class="isFlexBet">
              <p>颜色：{{item.Color}}</p>
              <p>年份：{{item.Year}}</p>
            </div>
            <div class="isFlexBet">
              <p>版型类别：{{item.TempleCategoryName}}</p>
              <p>品牌：{{item.Brand}}</p>
            </div>
            <div class="isFlexBet">
              <p>主题：{{item.Theme}}</p>
              <p>系列：{{item.Series}}</p>
            </div>
            <div class="isFlexBet">
              <p>加工模式：{{item.MachiningModeText}}</p>
              <p>难易程度：{{item.DifficultyText}}</p>
            </div>
            <div class="isFlexBet">
              <p>产品小组：{{item.ProductTeam}}</p>
              <p>公司：{{item.CompanyName}}</p>
            </div>
            <div style="border-top: 1px solid #eee;padding-top:5px;margin:10px 0;">
              <p style="margin-bottom: 5px;">车缝师：{{item.Sewing}}</p>
              <p>
                备注：
                <span>{{item.Remark}}</span>
              </p>
            </div>
          </div>
        </template>
        <template #footer>
          <van-button size="small" @click="lookPopupBtn(item)">查看</van-button>
          <van-button size="small" @click="peoplePopupBtn(item)" v-show="item.JobState =='待分配'">分配</van-button>
        </template>
      </van-card>
    </van-list>

    <van-popup v-model="lookPopup" :style="{ width: '100%',height:'100%'}" style="background:#f5f5f5;">
      <van-nav-bar title="单号详情" left-text="返回" left-arrow @click-left="closeLookPopup"></van-nav-bar>
      <div class="popup_content">

        <h2>样衣开发单号：{{this.lookList.all.Number}}</h2>

        <div class="content">
          <div class="box">
            <div class="isFlexBet" style="margin-top:5px;">
              <p>设计款号:{{this.lookList.all.DesignNumber}}</p>
              <p>品牌：{{this.lookList.all.Brand}}</p>
            </div>
            <div class="isFlexBet">
              <p>企划状态：{{this.lookList.all.PlanningStatusDescription}}</p>
              <p>版型类型：{{this.lookList.all.TempleCategoryName}}</p>
            </div>
            <div class="isFlexBet">
              <p>设计师：{{this.lookList.all.DesignerName}}</p>
              <p>设计助理：{{this.lookList.all.DesignAssistant}}</p>
            </div>
            <div class="isFlexBet">
              <p>系列：{{this.lookList.all.Series}}</p>
              <p>主题：{{this.lookList.all.Theme}}</p>
            </div>
            <div class="isFlexBet">
              <p>样衣尺码：{{this.lookList.all.ClothingSize}}</p>
              <p>颜色：{{this.lookList.all.Color}}</p>
              <p>季节：{{this.lookList.all.QuarterText}}</p>
            </div>
            <div style="border-bottom: 1px solid #eee;padding-bottom: 10px;">设计要求：{{this.lookList.all.DesignRequirement}}</div>
          </div>
          <!-- 流程进度 -->
          <h2 style="margin-bottom:0;text-align: start;font-size:15px;" v-show="this.lookList.process.length">流程进度:</h2>
          <h2 style="margin-bottom:0;text-align: start;font-size:15px;" v-show="!this.lookList.process.length">暂无流程进度</h2>
          <van-steps direction="vertical" :active="lookList.process.length-1"  v-show="this.lookList.process">
            <van-step v-for="(item, index) of lookList.process" :key="index+'lookList.process'">
              <h3>{{item.statedescription}}</h3>
              <p>{{item.executor}}</p>
              <p>{{item.date}}</p>
              <p v-show="item.remark">备注：{{item.remark}}</p>
            </van-step>
          </van-steps>
        </div>

        <!-- 主料 -->
        <div class="content2">
          <h3>主料</h3>

          <!-- 内容 -->
          <van-collapse v-model="activeName" :border="false" class="box">
            <van-collapse-item v-for="(item, index) of lookList.fabric" :key="index+'lookList.fabric'">
              <template #title>
                <div style="font-weight: bold;">{{item.MaterialName}}</div>
              </template>
              <div class="container">
                <div class="isFlexBet">
                  <p>单件用量：<span>{{item.UnitUsage}}</span></p>
                  <p>单位：<span>{{item.Unit}}</span></p>
                </div>
                <div class="isFlexBet">
                  <p>部位：<span>{{item.ClothingPart}}</span></p>
                  <p>颜色：<span>{{item.ColorName}}</span></p>
                </div>
                <div class="isFlexBet">
                  <p>幅宽：<span>{{item.fukuan}}</span></p>
                  <p>克重：<span>{{item.kezhong}}</span></p>
                </div>
                <div>纱支：<span>{{item.shazhi}}</span></div>
              </div>
            </van-collapse-item>
          </van-collapse>
        </div>

        <!-- 辅料 -->
        <div class="content3">
          <h3>辅料</h3>          
          <!-- 内容 -->
          <van-collapse v-model="activeNames2" :border="false" class="box">
            <van-collapse-item v-for="(item, index) of lookList.accessories" :key="index+'lookList.accessories'">
              <template #title>
                <div style="font-weight: bold;">{{item.MaterialName}}</div>
              </template>
              <div class="container">
                <div class="isFlexBet">
                  <p>单件用量：<span>{{item.UnitUsage}}</span></p>
                  <p>单位：<span>{{item.Unit}}</span></p>
                </div>
                <div class="isFlexBet">
                  <p>规格：<span>{{item.Spec}}</span></p>
                  <p>颜色：<span>{{item.ColorName}}</span></p>
                </div>
                <div>材质：<span>{{item.MaterialQuality}}</span></div>
              </div>
            </van-collapse-item>
          </van-collapse>
        </div>

        <!-- 车缝师 -->
        <div class="content_bottom">
          <div class="isFlexBet boxSty">
            <p>车缝师: {{this.lookList.all.Sewing}}</p>
            <p v-show="assignorName">分配人: {{assignorName}}</p>
          </div>
          <div class="isFlexBet boxSty">
            <p>车缝系数：{{this.lookList.all.SewingCoefficient}}</p>
          </div>
          <div v-show="assignorRemark">车缝备注：{{assignorRemark}}</div>
        </div>
        
        <van-button v-show="this.lookList.all.JobState == '已分配'" style="margin-top:10px;" size="large" type="info" @click="writePopup = true">完成</van-button>
        <van-button v-show="this.lookList.all.JobState == '待分配'" style="margin-top:10px;" size="large" type="info" @click="peoplePopupBtn2">分配</van-button>
        <!-- <van-button style="margin-top:10px;" size="large" type="info" @click="sureBtn">完成</van-button> -->
      </div>
    </van-popup>

    <!-- 分陪人——弹出层 -->
    <van-action-sheet v-model="assignor" title="分配人选" :style="{ height: '50%' }" :click-overlay="onClose">
      <div class="assigonr_content isFlexArd" v-for="(item,index) of assignorList" :key="index+'assignorList'">
        <p style="flex: 1;">{{item.Name}}</p>
        <p style="flex: 1;">{{item.post}}</p>
        <p style="flex: 1;">{{item.Quit}}</p>
        <div class="btnSty"  @click="onSelect_assignorlist(item)">分配</div>
      </div>
    </van-action-sheet>

    <!-- 完成——填写车缝师备注 -->
  <van-popup v-model="writePopup" position="bottom">
      <van-field
        v-model="sureSc"
        label="车缝系数"
        placeholder="请输入车缝系数"
      >
      </van-field>
      <van-field
        v-model="sureremark"
        type="textarea"
        rows="2"
        label="车缝师备注"
        placeholder="请输入备注"
      >
      </van-field>
      <div style="margin: 16px;">
        <van-button round block type="info" @click="sureBtn">
          提交
        </van-button>
      </div>
    </van-popup>
  </div>
</body>
<script src="./commomJS/vue.min.js"></script>
<!-- <script src="./commomJS/axios.min.js"></script>
<script src="./commomJS/qs.min.js"></script> -->
<script src='http://dongtai.fsslpc.com/w/web/common/jquery.js'></script>
<script src="./commomJS/common.js"></script>
<script src="./commomJS/vant.min.js"></script>
<script src="../js/tongtai2.js"></script>

</html>